<template>
  <div>
    <div class="cascade-wrapper" v-for="(item, index) in categoryList" :key="index">
      <span class="cascade-png"></span>
      <span class="cascade-title">{{ item.title }}</span>
      <div v-if="item.children">
        <cascade :categoryList="item.children" class="cascade-wrapper-item"></cascade>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cascade',
  props: {
    categoryList: Array
  }
}
</script>

<style lang="stylus" scoped>
  .cascade-png
    display: inline-block
    position: relative
    width: .36rem
    height: .36rem
    top: .075rem
    left: .2rem
    background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
    margin-right: .1rem
    background-size: .4rem 3rem
  .cascade-title
    height: .8rem
    line-height: .8rem
    font-size: .32rem
    padding: 0 .2rem
  .cascade-wrapper-item
    padding: 0 .4rem
</style>
